<script setup lang="ts">
import { defineProps } from 'vue'

interface DataItem {
  timestamp: string
  temperature: number
  humidity: number
  light: number
}

const props = defineProps<{
  items: DataItem[]
}>()
</script>

<template>
  <div class="card shadow">
    <div class="card-header">
      <h5 class="mb-0"><i class="bi bi-graph-up"></i> 数据流</h5>
    </div>
    <div class="card-body">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>时间戳</th>
            <th>温度 (℃)</th>
            <th>湿度 (%)</th>
            <th>光照 (lux)</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in items" :key="item.timestamp">
            <td>{{ item.timestamp }}</td>
            <td>{{ item.temperature }}</td>
            <td>{{ item.humidity }}</td>
            <td>{{ item.light }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
.card {
  margin-block-start: 20px;
}
.table {
  font-size: 0.9rem;
}
</style>